//每个页面中标题栏
import React from "react";
import * as AcroIcon from "@arco-design/web-react/icon"
import "./common.css"
export function Title(
    {
        title,
        desc,
        type,
        data={}
    }:{
        title:string,
        desc:string,
        type:number,
        data:any
    }
){
    console.log("title data",data)
    let actionNode
    if(data===false){
        return null
    }
    if(type==1){
        //纯文字标题
        if(desc.length==0) actionNode=null
        else
        actionNode=<div className="actionDesc">{desc}</div>
    }else{
        actionNode=<div className="actionIcon">
            <div className="actionIconItem">
                <AcroIcon.IconUser className="actionIconStyle"/>
                <div className="actionIconText">{data.author}</div>
            </div>
            <div className="actionIconItem" style={{width:'140px'}}>
                <AcroIcon.IconClockCircle  className="actionIconStyle"/>
                <div className="actionIconText"  style={{width:'120px'}}>{data.uploadTime}</div>
            </div>
            <div className="actionIconItem"  style={{width:'100px'}}>
                <AcroIcon.IconEye  className="actionIconStyle"/>
                <div className="actionIconText"  style={{width:'80px'}}>{data.viewTimes}次浏览</div>
            </div>
            <div className="actionIconItem">
                <AcroIcon.IconMessage  className="actionIconStyle"/>
                <div className="actionIconText">{data.messageNumber}条评论</div>
            </div>
            <div className="actionIconItem"  style={{width:'100px'}}>
                <AcroIcon.IconPen  className="actionIconStyle"/>
                <div className="actionIconText"  style={{width:'80px'}}>99999字数</div>
            </div>
            <div className="actionIconItem" style={{width:'100px'}}>
                <AcroIcon.IconAttachment  className="actionIconStyle"/>
                <div className="actionIconText" style={{width:'80px'}}>技能学习</div>
            </div>
        </div>
    }
    return (
        <div style={{height:'auto',width:'100%'}}>
            <div className="viewerTitle">
                <div className='titleText'>{data.title || title}</div>
                {actionNode}
            </div>
        </div>
    )
}